import React, { Component } from 'react';
import { InputItem, WhiteSpace } from 'antd-mobile';
import ReactDOM from 'react-dom';
import ImageCode from '../component/ImageCode';
import './style/login.css';

class Login extends Component {

    constructor(props) {
        super(props);
        this.state = {
            imageCodeUrl: '',
            type1: 'password',//键盘1类型 
            isAgreen: false, //是否同意条款
            disable: true, //是否警用滑动验证
            phoneNum: '', //手机号
            password: '',//密码
            savePwd: false, //是否保存密码
        }
    }

    componentDidMount() {
        const $this = ReactDOM.findDOMNode(this);
        const _phoneInput = $this.querySelectorAll('.am-list-item .am-input-control input');
        if (_phoneInput) {
            [..._phoneInput].forEach((v) => {
                v.style.fontSize = '1.3rem';
            });
        }

        //模拟请求验证码
        this.setState({
            imageCodeUrl: require('../compile/img/login/imageCodeUrl.png'),
            imageWidth: document.body.clientWidth * 0.84
        })
    }


    //获取手机号
    getPhoneNum = (v) => {
        v = v.replace(new RegExp(" ", "gm"), '');
        console.log(v);
        this.setState({
            phoneNum: v,
            disable: v.length === 11 ? false : true
        });
    }

    //显示密码
    changeInputType1 = () => {
        this.setState({
            type1: this.state.type1 === 'text' ? 'password' : 'text'
        })
    }

    goback = () => {
        this.props.history.goBack();
    }

    //保存密码
    agreen = () => {
        this.setState({
            savePwd: !this.state.savePwd
        });
    }

    goRegistered = () => {
        this.props.history.push({ pathname: "/registered" });
    }

    render() {
        return (
            <div className='login'  >
                <div className='loginNavarBar'>
                    <div onClick={this.goback} className='loginNavarBarLeft'>
                        <img width='20rem' height='20rem' alt='' src={require('./img/login/left.png')}></img>
                    </div>
                    <div className='loginNavarBarTitle' >登录</div>
                    <div className='loginNavarBarLeft'></div>
                </div>
                <div className="auto">
                    <div className='loginLogo'>
                        <img width='80rem' height='80rem' alt='' src={require('./img/login/logo.png')}></img>
                    </div>
                    <div className='loginForm'>
                        <InputItem
                            type="phone"
                            placeholder="请输入手机号"
                            style={{ textAlign: "left" }}
                            clear={true}
                            labelNumber={0}
                            onChange={this.getPhoneNum}
                        > </InputItem>
                        <WhiteSpace  ></WhiteSpace>
                        <div style={{ position: 'relative' }}>
                            <InputItem
                                type={this.state.type1}
                                placeholder='请输入密码'
                                style={{ textAlign: "left" }}
                                labelNumber={0}
                            > </InputItem>
                            <div onClick={this.changeInputType1} className='registeredFormInputItemExtrImag'>
                                {
                                    this.state.type1 === 'password' ? <img alt='' src={require('./img/login/show.png')}></img> :
                                        <img alt='' src={require('./img/login/closeeay.png')}></img>
                                }
                            </div>
                        </div>
                        <WhiteSpace size='xl'></WhiteSpace>
                        <ImageCode
                            ref={v => this.imageCode = v}
                            imageUrl={this.state.imageCodeUrl}
                            imageWidth={this.state.imageWidth}
                            disable={this.state.disable}
                            phoneNum={this.state.phoneNum}
                        ></ImageCode>
                        <WhiteSpace></WhiteSpace>
                    </div>
                    <div className='loginSavePassword'>
                        {this.state.savePwd ? <img onClick={this.agreen} alt='' width='14rem' height='14rem' src={require('./img/login/agree.png')}></img> :
                            <img onClick={this.agreen} alt='' width='14rem' height='14rem' src={require('./img/login/disAgree.png')}></img>
                        }
                        <span>记住密码</span>
                    </div>
                    <div className='loginSubmit'>
                        登录
                </div>
                    <div className='loginClause'>
                        <div className='loginClauseRight'>
                            <span>还没有账号？</span>
                            <span onClick={this.goRegistered} style={{ color: '#F98743' }}> 去注册</span>
                        </div>
                    </div>
                </div>
            </div>
        )
    }

}

export default Login;